<template>
    <div>
        <div class="header">
            <h3>处理异常答题卡</h3>
            <!-- <span>模板管理</span> -->
            <p>
                <b @click="toggleFullscreen"><img src="../../assets/images/qp.png" alt=""> {{
                    isFullscreen ? "退出全屏" : "全屏(F11)" }}</b>
                <em @click="$router.back()">
                    退出</em>
            </p>
        </div>
        <!-- <div class="tabNav">
            <div class="searchlist"> -->
        <!-- <router-link :to="'/uploadhorizontalpositioning?templateId='+ $route.query.templateId" :class="{ hover: isActive('/uploadhorizontalpositioning','/horizontalpositioning') }">上传&水平定位</router-link> -->
        <!-- <router-link :to="'/basicinformation?templateId='+ $route.query.templateId" :class="{ hover: isActive('/basicinformation') }">基础信息</router-link> -->
        <!-- <router-link to="/horizontalpositioning" active-class="hover">水平定位</router-link> -->
        <!-- <router-link to="/admissionticketnumberarea" active-class="hover">准考证号区</router-link> -->
        <!-- <router-link :to="'/objectivequestionarea?templateId='+ $route.query.templateId" active-class="hover">客观题区</router-link> -->
        <!-- <router-link :to="'/subjectivequestions?templateId='+ $route.query.templateId" active-class="hover">主观题区</router-link> -->
        <!-- </div>
            <div class="buttoncontent"> -->
        <!-- <span @click="annoatentauto" v-loading.fullscreen.lock="fullscreenLoading"><img src="../../assets/images/zdsb.png" alt="">自动识别</span>
                <span @click="cleardata" style="color:#EC555A"><img src="../../assets/images/empty.png" alt="">一键清空</span> -->
        <!-- <span><img src="../../assets/images/zc.png">暂存</span> -->
        <!-- <span><img src="../../assets/images/copy.png">复用其他考试模板</span> -->
        <!-- </div> -->
        <!-- </div> -->

    </div>
</template>

<script>
import { getautoannotateDate, clearModeldata } from '@/api/paperinfo/paperinfo.js'
export default {
    data() {
        return {
            isFullscreen: false,
            fullscreenLock: false,
            fullscreenLoading: false
        }
    },
    mounted() {
        // 初始化全屏状态
        this.handleFullscreenChange();
        // 添加事件监听
        document.addEventListener('fullscreenchange', this.handleFullscreenChange);
        // 键盘事件监听
        document.addEventListener('keydown', this.handleKeyPress, { capture: true });
    },
    beforeDestroy() {
        // 组件销毁时移除监听
        document.removeEventListener('keydown', this.handleKeyPress);
        document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
    },
    methods: {
        //自动识别
        annoatentauto() {
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            let obj = {
                templateId: this.$route.query.templateId,
            }
            getautoannotateDate(obj).then(res => {
                if (res.code == 200) {
                    loading.close();
                    this.$emit('clearData', 1)
                }
            })
        },
        isActive(...routes) {
            // 如果传入的是一个路径数组，检查当前路径是否在数组中
            if (Array.isArray(routes[0])) {
                return routes[0].some(route => this.$route.path.startsWith(route));
            }
            // 如果传入的是单个路径，直接检查是否匹配
            return routes.some(route => this.$route.path.startsWith(route));
        },
        //清空模板clearModeldata
        cleardata() {
            let obj = {
                examTemplateId: this.$route.query.templateId,
            }
            clearModeldata(obj).then(res => {
                if (res.code == 200) {
                    this.$emit('clearData', 1)
                }
            })
        },
        handleKeyPress(e) {
            console.log('这里是esc', e.key, this.isFullscreen);
            if (e.key === 'F11') {
                e.preventDefault();
                if (!this.fullscreenLock) {
                    this.fullscreenLock = true;
                    this.toggleFullscreen();
                    setTimeout(() => {
                        this.fullscreenLock = false;
                    }, 1000);
                }
            }
            // 处理ESC键 - 关键修复：直接退出全屏，不调用toggleFullscreen
            else if (e.key === 'Escape' && this.isFullscreen) {
                console.log('ESC键退出全屏');
                e.preventDefault();
                document.exitFullscreen().catch(console.error);
            }
        },
        // 切换全屏
        toggleFullscreen() {
            if (!this.isFullscreen) {
                document.documentElement.requestFullscreen()
                    .then(() => {
                        console.log('进入全屏成功');
                    })
                    .catch(err => {
                        console.error('全屏失败:', err);
                        this.fullscreenLock = false;
                    });
            } else {
                console.log('按钮退出全屏');
                document.exitFullscreen().catch(console.error);
            }
        },
        // 处理全屏状态变化
        handleFullscreenChange() {
            this.isFullscreen = !!(
                document.fullscreenElement
            );
            console.log('全屏状态变化:', this.isFullscreen);
        }
    }
}
</script>

<style scoped>
.header {
    padding: 0 40px;
    height: 48px;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    background: #1A48DB;
    font-size: 16px;
}

.header h3 {
    font-weight: normal;
    font-size: 16px;
}

.header p {
    display: flex;
}

.header p b {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 134px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 17px;
    border: 1px solid #FFFFFF;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
    margin-right: 14px;
}

.header p b img {
    width: 16px;
    margin-right: 8px;
}

.header p em {
    display: inline-block;
    width: 76px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 17px;
    border: 1px solid #FFFFFF;
    color: #1A48DB;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
    font-style: normal;
}

.tabNav {
    padding: 0 40px;
    height: 54px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px 0 10px;
    background: #fff;
}

.tabNav ul {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.tabNav ul li {
    padding: 0 20px;
    cursor: pointer;
    line-height: 38px;
    color: #557292;
    position: relative
}

.tabNav ul li:hover,
.tabNav ul li.hover {
    color: #2A303B;
}

.tabNav ul li:hover::after,
.tabNav ul li.hover::after {
    content: '';
    width: 24px;
    height: 4px;
    background: #295CFF;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0
}

.searchlist {
    box-sizing: border-box;
    width: auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    height: 54px;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 0 24px;
    align-items: center;
}

.searchlist {
    padding-left: 20px;
    display: flex;
    align-items: center;
    justify-content: left;
}

.searchlist a {
    display: block;
    color: #557292;
    font-size: 14px;
    /* width:100px; */
    text-align: center;
    position: relative;
    line-height: 52px;
    padding: 0 15px;
}

.searchlist a:hover,
.searchlist a.hover {
    color: #295CFF;
}

.searchlist a:hover::after,
.searchlist a.hover::after {
    content: '';
    width: 24px;
    height: 4px;
    background: #295CFF;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

.buttoncontent {
    display: flex;
    align-items: center;
}

.buttoncontent span {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #1A48DB;
    padding-left: 15px;
    margin-right: 15px;
    cursor: pointer;
    position: relative;
}

.buttoncontent span:last-child {
    color: #B3B8C2
}

.buttoncontent span img {
    width: 14px;
    height: 14px;
    margin-right: 6px;
}

.buttoncontent span::after {
    content: '';
    width: 1px;
    height: 14px;
    background-color: #DEE1E7;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.buttoncontent span:first-child:after {
    background-color: #fff;
}
</style>